<template>
    <div>
        <Nav></Nav>
        <!-- swiper area -->
        <div class="swiper-area">
            <swiper :options="swiperOption"  v-if="bannerPicArray.length>0" ref="mySwiper">
                <!-- slides -->
                <swiper-slide v-for="item in bannerPicArray" :key="item">
                    <img :src="item" alt="banner">
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div>
        <!-- product area -->
        <div class="product-area">
            <h2>了解我们的产品</h2>
            <p>搭建企业协同发展服务平台，以项目为纽带，多种合作方式，实现企业之间资源共享、互利共赢</p>
            <ul>
                <li v-for="(item , index) in product" :key="index">
                    <img :src="item.img" alt="">
                    <p>{{ item.name }}</p>
                </li>
            </ul>
        </div>
        <!-- <div class="company-area">
            <h2>企业协同发展项目</h2>
            <p>搭建企业协同发展服务平台，以项目为纽带，多种合作方式，实现企业之间资源共享、互利共赢</p>
            <div class="swiper-area">
                <swiper :options="swiperItemOption" ref="mySwiper">
                    <swiper-slide v-for="item in companyBanner" :key="item">
                        <img :src="item" alt="" srcset="">
                    </swiper-slide>
                    <div class="swiper-pagination"  slot="pagination"></div>
                </swiper>
            </div>
        </div> -->
        <!-- customer area -->
        <div class="customer-area">
            <h2>全方位客户服务</h2>
            <ul>
                <li @click="studys">迅速成为店长</li>
                <li @click="studys">线上视频教学</li>
                <li @click="studys">加盟店培训</li>
            </ul>
        </div>
        <!-- foot area -->
        <div class="foot-area">
            <ul>
                <li>
                    <h3>产品与服务</h3>
                    <p>微商城</p>
                    <p>微信小程序</p>
                    <p>亖次元分销</p>
                    <p>亖次元收银</p>
                    <p>蓝鲸供存销</p>
                    <p>版本更新情况</p>
                </li>
                <li>
                    <h3>友情链接</h3>
                    <p>敬请期待</p>
                    <!-- <p>合作联系</p>
                    <p>加入我们</p> -->
                </li>
                <li>
                    <h3>官方微信号</h3>
                    <img style="width:50%" src="https://cdn.hansuku.com/dayi_wechat.png" alt="" srcset="">
                </li>
                 <li>
                    <h3>联系我们</h3>
                    <p>联系电话：0571-28201992</p>
                    <p>工作时间：周一到周六：9：00  ~  18：00</p>
                    <p>公司地址：浙江省杭州市江干区浙江互联网产业大厦B座825室</p>
                </li>
            </ul>
            <p class="record-info">
                <img src="https://91dapin.yiyiyiyi.info/img/badge.png" style="width:13px;height:13px;" alt="">
                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010802008920">{{ SECURITY_NUM }}</a>
                增值电信业务经营许可证：<a target="_blank" href="https://tsm.miit.gov.cn/pages/EnterpriseSearchList_Portal.aspx?type=0&keyword=%E6%B5%99B2-20180880&pageNo=1">{{ TELECOMMUNICTION_LICENSE }}</a>
                {{ ICP_NUM }}
            </p>
            <p class="record-info">Copyright {{ year }} by DayiTech. All Rights Reserved.</p>
        </div>
    </div>
</template>

<script>
    import Nav from '../component/nav.vue'
    import 'swiper/dist/css/swiper.css'
    import { swiper , swiperSlide } from 'vue-awesome-swiper'
    export default {
        metaInfo:{
            title:'大乙科技服务平台',
            meta:[{
                name:'大乙科技服务平台',
                content: '大乙科技服务平台-content'
            }]
        },
        components:{
            swiper,
            swiperSlide,
            Nav,
        },
        data() {
            return {
                product:[
                    {
                        name:'亖次元',
                        url:'',
                        img:'https://cdn.hansuku.com/WechatIMG760.jpeg',
                    },
                    {
                        name:'蓝鲸',
                        url:'',
                        img:'https://cdn.hansuku.com/WechatIMG759.jpeg',
                    },
                    {
                        name:'蜜蜂',
                        url:'',
                        img:'https://cdn.hansuku.com/tobe.jpg',
                    },
                    {
                        name:'飞兔',
                        url:'',
                        img:'https://cdn.hansuku.com/tobe.jpg',
                    }
                ],
                bannerPicArray:[],
                // companyBanner:[
                //     {name:'全媒体整合式宣传',icon}
                // ],
                swiperOption:{
                    slidesPerView:1,
                    spaceBetween: 0,
                    loop: true,
                    effect: 'fade',
                    autoplay: {
                        delay: 2500,
                        disableOnInteraction: false
                    },
                    pagination:{
                        el:'.swiper-pagination',
                        clickable: true,
                        renderBullet(index, className) {
                            return `<span class="${className} swiper-pagination-bullet-custom"></span>`
                        }
                    }
                },
                // swiperItemOption:{
                //     slidesPerView:1,
                //     pagination:{
                //         el:'.swiper-pagination',
                //         clickable: true,
                //         renderBullet(index, className) {
                //             return `<span class="${className} swiper-pagination-bullet-custom"></span>`
                //         }
                //     }
                // },
                SECURITY_NUM:'浙公网安备33010802008920号',
                TELECOMMUNICTION_LICENSE:'浙B2-20180880',
                ICP_NUM:'浙ICP备17055358号-1',
                year:'',
            }
        },
        mounted(){
            // this.bannerPicArray.push('https://cdn.hansuku.com/Banner_1.jpg')
            this.bannerPicArray.push('https://cdn.hansuku.com/dayi_banner2.jpg')
            this.bannerPicArray.push('https://cdn.hansuku.com/dayi_banner3.jpg')
            let now = new Date()
            this.year = now.getFullYear()
        },
        methods: {
            /*视频教学*/
            studys(){
              this.$router.push('/learn');
            }
        },
    }
</script>

<style scoped>
    .swiper-area{
        overflow: hidden;
    }
    .swiper-area img{
        width:100%;
        height:100%;
    }
    .product-area{
        width:100%;
        height:410px;
        overflow: hidden;
    }
    .product-area p{
        padding-bottom: 20px;
    }
    .product-area h2,.product-area p{
        text-align: center;
    }
    .product-area ul{
        list-style:none;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        width:100%;
        padding:0;
        margin:0;
    }
    .product-area ul li{
        flex: 1;
    }
    .product-area ul li img{
        width:150px;
        height:150px;
        margin:0 auto;
        display: block;
    }
    .product-area ul li p{
        font-size:18px;
        text-align: center;
    }
    .company-area h2,.company-area p{
        text-align: center
    }
    .customer-area{
        width:100%;
        height:200px;
        background-color:#D7D7D7;
        overflow: hidden;
    }
    .customer-area h2{
        text-align: center;
    }
    .customer-area ul{
        width: 100%;
        display: flex;
        list-style: none;
        padding: 0;
        margin:50px 0px 0px 0px;
    }
    .customer-area ul li{
        flex:1;
        text-align: center;
        cursor:pointer;
    }
    .foot-area{
        width:100%;
        background-color:#F5F5F5;
        padding-top:30px;
    }
    .foot-area ul{
        width:960px;
        margin:0 auto;
        padding: 0;
        display: flex;
        list-style: none;
        justify-content: center;
        border-bottom:1px solid black;
    }
    .foot-area ul li{
        flex:1;
    }
    .foot-area ul li p{
        font-size:12px;
    }
    .record-info{
        font-size:13px;
        text-align: center;
    }
    .record-info:last-child{
        padding-bottom:20px;
    }
    .record-info a{
        text-decoration: none;
        cursor: pointer;
    }
</style>
<style>
    .swiper-pagination-bullet-custom{
        width:30px;
        height:5px;
        border-radius:0px;
        background-color:rgba(255,255,255,.3);
        opacity: 1;
    }
    /* .swiper-wrapper{
        height:500px;
    } */
    .swiper-pagination-bullet-active{
        background-color:#fff;
    }
</style>
